<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import Map from 'ol/Map.js'
import TileLayer from 'ol/layer/Tile.js'
import OSM from 'ol/source/OSM.js'
import View from 'ol/View.js'

let map
const mapViewer = ref<HTMLDivElement>()
const zoom = ref(2)

onMounted(() => {
  map = new Map({
    layers: [
      new TileLayer({
        source: new OSM()
      })
    ],
    target: mapViewer.value,
    view: new View({
      center: [0, 0],
      zoom: zoom.value
    })
  })
})

watch(zoom, () => {
  const view = map.getView()
  view.setZoom(zoom.value)
})
</script>

<template>
  <div ref="mapViewer" class="map"></div>
  <div class="btns">
    <a-button @click="zoom++">Zoom out</a-button>
    <a-button style="margin-left: 10px" @click="zoom--">Zoom in</a-button>
  </div>
</template>

<style lang="less" scoped>
.map {
  width: 100%;
  height: 100%;
  &:focus {
    outline: #4a74a8 solid 0.15em;
  }
}

.btns {
  position: absolute;
  left: 0;
  bottom: 0;
}
</style>
